import React, {Component} from 'react';
import './Index.css'
import Swiper from './Swiper/Swiper';
import Nav from './Nav/Nav';
import Clothes from './Clothes/Clothes';
import Nutrition from './Nutrition/Nutrition';
import MaybeLike from './MaybeLike/MaybeLike';
import Navbar from './Navbar/Navbar';
import Beauty from "./Beauty/Beauty";
import IScroll from 'iscroll';
import {withRouter} from 'react-router-dom';
class Index extends Component {
    constructor() {
        super();
        this.state={
            myscroll:"",
            NavbarShow:false
        }
    }
    fn(){
        var NavbarShow ;
        NavbarShow = !this.state.NavbarShow;
        this.setState(state=>{
            state.NavbarShow =NavbarShow;
            return state;
        })
    }
    toSearchPage(){
        this.props.history.push({pathname:"/SearchPage"});
    }
    render() {
        //console.log(this.props.NavbarShow)
        return (
            <div className="Index">
                <header className="Header">
                    <div className="HeaderLeft">
                        <img src="../img/logo.png" alt=""/>
                    </div>
                    <div className="HeaderCenter">
                        <div className="HeaderCenter_input" onClick={this.toSearchPage.bind(this)}>
                            <i className="fa fa-search"></i>
                            <input type="text" placeholder="搜索伊的家商品"/>
                        </div>
                    </div>
                    <div className="HeaderRight">
                        <i className="fa fa-reorder" onClick={() => {
                            this.fn()
                        }}></i>
                    </div>
                </header>
                <Navbar NavbarShow={this.state.NavbarShow}></Navbar>
                <div className="container">
                    <div className="inner">
                        <Swiper></Swiper>
                        <Nav></Nav>
                        <div className="goodsOne">
                            <div><img src="img/3.jpg" alt=""/></div>
                            <div><img src="img/4.jpg" alt=""/></div>
                            <div><img src="img/5.jpg" alt=""/></div>
                        </div>
                        <div className="goodsTwo">
                            <div className="goodsTwoLeft">
                                <img src="img/6.jpg" alt=""/>
                            </div>
                            <div className="goodsTwoRright">
                                <div><img src="img/7.jpg" alt=""/></div>
                                <div><img src="img/8.jpg" alt=""/></div>
                            </div>
                        </div>
                        <Clothes></Clothes>
                        <Beauty></Beauty>
                        <Nutrition></Nutrition>
                        <div className="SmallTips">
                            <span>——您可能喜欢——</span>
                        </div>
                        <MaybeLike myscroll={this.state.myscroll}></MaybeLike>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount(){
        document.querySelector(".container").addEventListener("touchmove",e=>e.preventDefault())
        var myScroll=new IScroll(".container");
        this.setState({
            myscroll:myScroll
        })
    }
}

export default withRouter(Index);

